<template>
	<div>
		<el-card class="box-card" shadow="never" style="height: 140px; width: 100%;">
			<el-form :model="caiGouQO" ref="caiGouQO">
				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="采购单编号" prop="cgNo" label-width="150px">
							<el-input v-model="caiGouQO.cgNo" filterable clearable placeholder="请输入采购单编号"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="商品名称" prop="cgGname" label-width="150px">
							<el-select v-model="caiGouQO.cgGname" filterable clearable placeholder="请选择"
								style="width: 150px;">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="状态" prop="cgStatus" label-width="150px">
							<el-select v-model="caiGouQO.cgStatus" filterable clearable placeholder="请选择状态"
								style="width: 150px;">
								<el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="商品数量" prop="cgMinNum" label-width="150px">
							<el-input v-model="caiGouQO.cgMinNum" filterable clearable placeholder="请输入商品数量"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="商品数量" prop="cgMaxNum" label-width="150px">
							<el-input v-model="caiGouQO.cgMaxNum" filterable clearable placeholder="请输入商品数量"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-button type="info" plain @click="select(1)">查询</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="warning" plain
							@click="resetForm('caiGouQO')">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="primary" plain @click="dialogAdd=true">添加</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card></br>

		<el-card class="box-card" shadow="never" style="height: 420px; width: 100%;">
			<el-table :data="currentCaiGous" border>
				<el-table-column type="index"></el-table-column>
				<el-table-column prop="cgNo" label="采购单编号" align="center"></el-table-column>
				<el-table-column prop="cgGname" label="商品名称" align="center"></el-table-column>
				<el-table-column prop="cgNum,cgUname" label="数量 单位" align="center">
					<template slot-scope="scope">
						{{scope.row.cgNum}} {{scope.row.cgUname}}
					</template>
				</el-table-column>
				<el-table-column prop="cgIn" label="采购时间" align="center"></el-table-column>
				<el-table-column prop="cgEnd" label="更新时间" align="center"></el-table-column>
				<el-table-column prop="cgStatus" label="采购单状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.cgStatus == 1">待审核</span>
						<span v-if="scope.row.cgStatus == 2">已审核</span>
						<span v-if="scope.row.cgStatus == 3">已完成</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-row v-if="scope.row.cgStatus == 1">
							<el-button type="success" plain @click="edit(scope)">审核</el-button>
						</el-row>
						<el-row v-if="scope.row.cgStatus == 2">
							<el-button type="primary" plain @click="putIn(scope)">原料入库</el-button>
						</el-row>
						<el-row v-if="scope.row.cgStatus == 3">
							<el-button type="warning" plain>已完成</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table></br>
			<el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
				:page-count="totalPage" @current-change="goPage">
			</el-pagination>
		</el-card>

		<el-dialog title="添加采购单" :visible.sync="dialogAdd">
			<el-form :model="addCaiGou" ref="addCaiGou">
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品名称" prop="cgGname" label-width="80px">
							<el-select v-model="addCaiGou.cgGname" filterable clearable placeholder="请选择商品名称">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品数量" prop="cgNum" label-width="80px">
							<el-input-number v-model="addCaiGou.cgNum" :min="1000" :max="10000" :step="500"
								step-strictly></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品单位" prop="cgUname" label-width="80px">
							<el-select v-model="addCaiGou.cgUname" filterable clearable placeholder="请选择商品单位">
								<el-option v-for="u in allUnits" :key="u.name" :label="u.name" :value="u.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAdd=false,resetForm('addCaiGou')">取 消</el-button>
				<el-button type="primary" @click="add">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="审核采购单" :visible.sync="dialogUpdate">
			<el-form :model="updateCaiGou" ref="updateCaiGou">
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品名称" prop="cgGname" label-width="80px">
							<el-select v-model="updateCaiGou.cgGname" filterable clearable placeholder="请选择商品名称">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品数量" prop="cgNum" label-width="80px">
							<el-input-number v-model="updateCaiGou.cgNum" :min="1000" :max="10000" :step="500"
								step-strictly></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品单位" prop="cgUname" label-width="80px">
							<el-select v-model="updateCaiGou.cgUname" filterable clearable placeholder="请选择商品单位">
								<el-option v-for="u in allUnits" :key="u.name" :label="u.name" :value="u.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate=false">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="添加原料入库单" :visible.sync="dialogPutIn">
			<el-form :model="addYuanLiao" ref="addYuanLiao">
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="采购单号" prop="cgNo" label-width="80px">
							<el-input v-model="addYuanLiao.cgNo" disabled filterable clearable
								placeholder="请输入采购单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品名称" prop="cgGname" label-width="80px">
							<el-select v-model="addYuanLiao.cgGname" disabled filterable clearable
								placeholder="请选择商品名称">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="商品数量" prop="cgNum" label-width="80px">
							<el-input-number v-model="addYuanLiao.cgNum" :disabled="true" :min="1000" :max="10000"
								:step="500" step-strictly></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品单位" prop="cgUname" label-width="80px">
							<el-select v-model="addYuanLiao.cgUname" disabled filterable clearable
								placeholder="请选择商品单位">
								<el-option v-for="u in allUnits" :key="u.name" :label="u.name" :value="u.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="80px">
							<el-input v-model="addYuanLiao.riName" filterable clearable
								placeholder="请输入原料名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="供应商" prop="riSname" label-width="80px">
							<el-select v-model="addYuanLiao.riSname" filterable clearable placeholder="请选择供应商">
								<el-option v-for="s in allSuppliers" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料数量" prop="riNum" label-width="80px">
							<el-input-number v-model="addYuanLiao.riNum" :min="addYuanLiao.cgNum" :max="10000"
								:step="100" step-strictly></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="原料单价" prop="riPrice" label-width="80px">
							<el-input-number v-model="addYuanLiao.riPrice" :precision="1" :min="0" :max="100"
								:step="0.1" step-strictly></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料仓库" prop="riStorage" label-width="80px">
							<el-select v-model="addYuanLiao.riStorage" filterable clearable placeholder="请选择仓库">
								<el-option v-for="s in allStorages" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogPutIn=false">取 消</el-button>
				<el-button type="primary" @click="addPutIn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: "caigou",
		data() {
			return {
				// allGoods: [],
				// allUnits：[],
				// allSuppliers: [],
				// allStorages: [],

				caiGouQO: {},
				currentCaiGous: [],

				dialogAdd: false,
				dialogUpdate: false,
				dialogPutIn: false,

				addCaiGou: {},
				updateCaiGou: {},
				addYuanLiao: {},

				status: [{
					value: '1',
					label: '待审核'
				}, {
					value: '2',
					label: '已审核'
				}, {
					value: '3',
					label: '已完成'
				}],

				totalPage: 0,
				currentPage: 0,

				allGoods: [{
					name: '无籽蜜桔'
				}, {
					name: '武鸣沃柑'
				}, {
					name: '红富士苹果'
				}, {
					name: '新鲜牛排肉'
				}, {
					name: '新鲜五花肉'
				}, {
					name: '优质猪瘦肉'
				}, {
					name: '海鸭咸鸭蛋'
				}],
				allUnits: [{
					name: '千克'
				}, {
					name: '克'
				}, {
					name: '斤'
				}, {
					name: '个'
				}],
				allSuppliers: [{
					name: '沂蒙果蔬种植合作社'
				}, {
					name: '宏进冰鲜猪副产品批发'
				}, {
					name: '惠盈食用农产品经营部'
				}],
				allStorages: [{
					name: '成都生鲜仓库'
				}, {
					name: '上海生鲜仓库'
				}, {
					name: '武汉生鲜仓库'
				}],
			}
		},
		methods: {
			addPutIn() {
				axios.post("/caigouAPI/caigou/putIn", this.addYuanLiao)
					.then(res => {
						if (res.data.code == 200) {
							this.dialogPutIn = false;
							this.goPage(this.currentPage);
							// this.getAll();
							this.$message({
								type: 'success',
								message: '入库成功!'
							});
						};
						this.resetForm('addYuanLiao');
					});
			},
			putIn(scope) {
				this.dialogPutIn = true;
				//数据回显
				this.addYuanLiao = {
					...scope.row
				}
			},
			update() {
				if (this.updateCaiGou.cgId) {
					axios.post("/caigouAPI/caigou/update", this.updateCaiGou)
						.then(res => {
							if (res.data.code == 200) {
								this.dialogUpdate = false;
								this.goPage(this.currentPage);
								// this.getAll();
								this.$message({
									type: 'success',
									message: '审核成功!'
								});
							};
						})
				}
			},
			edit(scope) {
				this.dialogUpdate = true;
				//数据回显
				this.updateCaiGou = {
					...scope.row
				}
			},
			add() {
				axios.post("/caigouAPI/caigou/add", this.addCaiGou)
					.then(res => {
						if (res.data.code == 200) {
							this.dialogAdd = false;
							this.goPage(this.currentPage);
							// this.getAll();
							this.$message({
								type: 'success',
								message: '添加成功!'
							});
						};
						this.resetForm('addCaiGou');
					});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			select(p) {
				axios.get("/caigouAPI/caigou/list/" + p, {
					params: this.caiGouQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentCaiGous = res.data.data.list;
						this.totalPage = res.data.data.pages;
						this.currentPage = 1;
						this.$message({
							type: 'success',
							message: '查询成功!'
						});
					}
				})
			},
			goPage(p) {
				axios.get("/caigouAPI/caigou/list/" + p, {
					params: this.caiGouQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentCaiGous = res.data.data.list;
						this.totalPage = res.data.data.pages;
					}
				})
			},
			getAll() {
				//获取所有商品信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allGoods = res.data.data;
					}
				})
				//获取所有单位信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allUnits = res.data.data;
					}
				})
				//获取所有供应商信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allSuppliers = res.data.data;
					}
				})
				//获取所有仓库信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allStorages = res.data.data;
					}
				})
			}
		},
		mounted() {
			// this.getAll();
			this.goPage(1);
		}
	}
</script>

<style>

</style>